<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI </title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
</head>
<body style="background:#F4F5F6;">
<div class="hui-wrap">
    <div class="hui-media-list" id="refreshMain" style="padding:18px 5px;">
        <div class="hui-refresh-icon"></div>
        <ul id="MainList"></ul>
    </div>
</div>
<script type="text/javascript" src="js/hui.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/hui-refresh-load-more.js"></script>
<script type="text/javascript">
var page = 1, cate = 18; 
hui.Back = null;
hui.plusReady(function(){
    var indexView = plus.webview.getLaunchWebview();
    var nextPage = {
        pageId : 'productlist3.html', 
        callBack : function(){
            indexView.evalJS('hui("#shopCate").find("div").removeClass("hui-tab-active"); hui("#shopCate3").addClass("hui-tab-active")');
        }
    }
    var prevPage = {
        pageId : 'productlist1.html', 
        callBack : function(){
            indexView.evalJS('hui("#shopCate").find("div").removeClass("hui-tab-active"); hui("#shopCate1").addClass("hui-tab-active")');
        }
    }
    hui.drag(prevPage, nextPage);
});
hui.refresh('#refreshMain', refreshList);
hui.loadMore(loadMore);
function refreshList(){
    hui.loading();
    hui.postJSON(
        'http://shop.hcoder.net/myApi.php',
        {act:"goodsList", page : 1, cate:cate},
        function(res){
            hui.closeLoading();
            hui.endRefresh();
            hui.resetLoadMore();
            if(res.msg == 'null'){return false;}
            var html = '';
            for(var i = 0; i < res.msg.length; i++){
                html += '<li><a href="javascript:showInfo(\''+res.msg[i].goods_id+'\');">'+
                    '<div class="hui-media-list-img"><img src="http://shop.hcoder.net/'+res.msg[i].goods_thumb+'" /></div>'+
                    '<div class="hui-media-content">'+
                        '<h1>['+res.msg[i].goods_id+'] '+res.msg[i].goods_name+'</h1>'+
                        '<p>power by hcoder.net</p>'+
                    '</div>'
                '</a></li>';
                hui('#MainList').html(html);
            }
            page++
        }
    );
}
function loadMore(){
    hui.postJSON(
        'http://shop.hcoder.net/myApi.php',
        {act:"goodsList", page : page, cate:cate},
        function(res){
            hui.endLoadMore();
            if(res.msg == 'null'){
                hui.endLoadMore(true);
                return false;
            }
            for(var i = 0; i < res.msg.length; i++){
                var li = document.createElement('li');
                li.innerHTML = '<a href="javascript:showInfo(\''+res.msg[i].goods_id+'\');">'+
                    '<div class="hui-media-list-img"><img src="http://shop.hcoder.net/'+res.msg[i].goods_thumb+'" /></div>'+
                    '<div class="hui-media-content">'+
                        '<h1>['+res.msg[i].goods_id+'] '+res.msg[i].goods_name+'</h1>'+
                        '<p>power by hcoder.net</p>'+
                    '</div>'
                '</a>';
                hui(li).appendTo('#MainList');
            }
            page++;
        }
    );
}
</script>
</body>
</html>